<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    body {
        font-family: Arial, sans-serif;
        margin: 0;
        padding: 0;
        line-height: 1.6;
    }

    header {
        background-color: #333;
        color: #fff;
        text-align: center;
        padding: 10px 20px;
    }

    nav ul {
        list-style: none;
        padding: 0;
    }
    nav ul li {
        display: inline;
        margin-right: 10px;
    }

    nav ul li a {
        color: #fff;
        text-decoration: none;
        padding: 5px 10px;
        border-radius: 5px;
        transition: background-color 0.3s ease;

    }
    nav ul li a:hover {
        background-color: #555;
    }

    main {
        display: flex;
        padding: 20px;
    }
    footer{
        text-align: center;
        padding: 10px;
        background-color: #333;
        color: #fff;
        position: fixed;
        width: 100%;
        bottom: 0;
    }
    section{
        flex: 1;
        margin-bottom: 20px;

    }
    div{
        height: 800px;
        width: 700px;
        margin: 0 auto;
    }
 
    img{
        height: 800px;
        width: 700px;
        
    }
</style>
<body>
    <header>
        <nav>
            <ul>
                <li><a href="#home">首页</a></li>
                <li><a href="register.html">注册</a></li>
                <li><a href="Login.html">登录</a></li>
                <li><a href="">关于我们</a></li>
            </ul>
        </nav>

    </header>
    <main>
        <section id="home">
            <h1>主流消费</h1>
            <p>大苏打的</p>
        </section>
        <section id="new">
            <h2>关于我们</h2>
            <p>我们是一</p>
        </section>
        <section id="contact">
            <h2>联系我们</h2>
            <p>打麻将呢</p>
        </section>

        <section id="about">
            <h2>解放南京</h2>
            <p>费什么劲呢</p>
        </section>

        <section id="about">
            <h2>非宁静而</h2>
            <p>粉丝纷纷</p>
        </section>
    </main>
    <div>
        <img id= "1img" src="" alt="">
    </div>
    <footer>
        <p>版权所有 &copy;2024</p>

    </footer>
</body>
</html>

<script>
    let img =['1.webp','2.webp','3.webp'];//图片数组
    let cuurrentIndex = 0;//当前图片索引
    let imgElement=document.getElementById('1img')//获取图片元素

    setInterval(function(){
      imgElement.src = img[cuurrentIndex];
      cuurrentIndex++;
      if(cuurrentIndex>=img.length){
        cuurrentIndex = 0;//重置索引
      }

    },1200)


</script>